<template>
  <div>
    <MyTable :arr="list">
      <template #header>
        <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </template>
      <template #main="{ row: obj, ind: index }">
        <td>{{ obj.id }}</td>
        <td>{{ obj.goods_name }}</td>
        <td>{{ obj.goods_price }}</td>
        <td>
          <input type="text"
           v-model="obj.inputValue"
            v-if="obj.inputVisible"
            @keyup.enter="addFn(obj)"
            v-focus
            @keyup.esc="escFn(obj)"
            @blur="blurFn(obj)"
          >
          <button v-else
          @click="obj.inputVisible = true"
          class="btn btn-primary btn-sm add-tag"
          >+Tag</button>
          <span v-for="(str,index) in obj.tags" :key="index" class="badge badge-warning">
            {{str}}
          </span>
        </td>
        <td>
          <button @click="delFn(index)" class="btn btn-danger btn-sm">删除</button>
        </td>
      </template>
    </MyTable>
  </div>
</template>

<script>
import MyTable from "../components/MyTable";
import axios from "axios";
axios.defaults.baseURL = "https://www.escook.cn";
export default {
  directives: {
    focus:{
      inserted(el){
        el.focus()
      }
    }
  },
  methods: {
    delFn(index){
      this.list.splice(index,1)
    },
    addFn(obj){
        if(obj.inputValue.length == 0){
          alert('请输入内容')
        }else{
          obj.tags.push(obj.inputValue)
          obj.inputVisible = false
        }
    },
    escFn(obj){
      obj.inputValue = ''
    },
    blurFn(obj){
      obj.inputVisible = false
    }
  },
  data() {
    return {
      list: [],

    };
  },
  components: {
    MyTable,
  },
  async created() {
    const res = await axios({
      url: "/api/goods",
    });
    console.log(res);
    this.list = res.data.data;
  },

};
</script>

<style>
</style>